<template>
	<view class="music_list">
		<!-- 歌曲信息 -->
		<view v-for="music,index in list" class="music_block block_bottom">
			<image :src="baseUrl  + music.cover"></image>
			<view class="music_block_text">
				<text> {{ music.name.length > 5 ? music.name.substring(0,6)+"..." : music.name }} </text>
				<text class="discription block_top"> 
					{{ 	music.author.length > 26 ? music.author.substring(0,26)+"..." : music.author }} 
				</text>
			</view>
			<view class="music_block_operation">
				<text @click="playMusic(music)">🎧️</text>
				<text @click="addFavorite(music.id)">🤍</text>
				<text @click="removeReMusic(index,music.id)" v-if="showDelete">✖️</text>
			</view>
		</view>
		<!-- 歌曲操作 -->
		<view class="none_kkry text_center top" v-if="list == null || list.length == 0">
			<text >😭 为什么空空如也?</text>
			<text >🧐 好像我还没开始听歌!</text>
			<text>🌼 通过搜索开启音乐之旅</text>
		</view>
	</view>
</template>

<script>
	import request from '../../common/api/request';
	import favorite from '../../common/api/favorite/favorite';
	export default {
		name:'MusicList',
		data() {
			return {
				baseUrl: request.baseServer
			}
		},
		props:{
			list:{},
			showDelete:true
		},
		methods: {
			// 播放音乐
			playMusic(music){
				this.$store.commit('playMusic',
				{
					name: music.name,
					author: music.author,
					url: music.url,
					cover: music.cover
				})
			},
			// 添加喜歡音樂
			addFavorite(musicId){
				this.$store.getters.isLogin;
				favorite.add({
					id:musicId
				});
			},
			// 删除最近播放
			removeReMusic(index,musicId){
				// this.$store.commit(
				// 	'removeRecentlyMusic',
				// 	{
				// 		index:index
				// 	}
				// )
				this.list.splice(index, 1);
			    favorite.delete({
					id:musicId
				});
			},
		}
	}
</script>

<style>
.music_list {
	margin: 0px;
	width: 100%;
}	
/* 文本信息块 */
.music_block{
	width: 100%;
	font-size: 17px;
	display: flex;
	align-items: center;
}
.music_block image{
	width: 80px;
	height: 80px;
	margin-right: 10px;
}
.music_block_text {
	width: 40%;
	display: flex;
	flex-direction: column;
	/* 文本溢出隐藏 */
    overflow: hidden;
}
/* 操作样式 */
.music_block_operation {
	width: 40%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.music_block_operation text {
	font-size: 24px;
	margin-right: 8px;
}
</style>
